<!--
 * @description  :盘库物品明细
 * @descriptionDetail:盘库物品明细
 * @copyright    : 浙江烟草
 * @author       : dw
 * @create       : 2022-10-09 22:21:21
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :isWhite="true" backText="返回" :title="navTitle">
    </theme-navbar>
    <!-- #endif -->
    <view class="">
      <!-- 标题内容 -->
      <view class="invent-content key-search-lay" style="padding: 30rpx 34rpx">
        <view class="invent-right">
          <view class="r-content">
            <text class="bold-title">
              {{ preParams.checkName }}
            </text>
            <u-tag style="flex-shrink: 0;" :spStyle="getSpStyle(preParams)" mode="dark" shape="circle" :text="preParams.statusName"></u-tag>
          </view>
          <view class="span-content">
            <view class="span-title">
              <text>{{ preParams.creator }}</text>
              <text>{{ preParams.checker }}</text>
            </view>
          </view>
          <view class="normal-title">
            <text> {{ preParams.checkTimeStart }} ~ {{ preParams.checkTimeEnd }} </text>
          </view>
          <view v-if="isDisabled">
            {{ preParams.remark }}
          </view>
          <view v-else>
            <u-input type="textarea" :border="false" placeholder="请填写备注" height="66" v-model="preParams.remark" />
          </view>
        </view>
      </view>

      <!-- 列表内容 -->
      <view :class="[!isDisabled ? 'u-page content pb-70' : 'u-page content']">
        <me-table
          :i="0"
          :top="isTop"
          :index="0"
          :load-data="onloadData"
          :init-load="false"
          ref="mescrollItem0"
        >
          <view slot-scope="d" class="list-item-root">
            <view class="i-box">
              <view class="i-desc u-p-b-20">
                <view class="form-style-title">
                  <view class="left-info-tag"></view>
                  <view class="fs-title">
                    {{ d.data.caseCode }}
                  </view>
                </view>
                <view class="i-row">
                  <u-row gutter="16">
                    <u-col span="5" class="i-col" style="align-items: flex-start;">
                      <text class="i-bold">
                        数量(条)
                      </text>
                      <text class="i-font u-p-b-20 u-p-t-20">
                        {{ d.data.qty }}
                      </text>
                    </u-col>
                    <u-col span="2"></u-col>
                    <u-col span="5" class="i-col" style="align-items: flex-start;">
                      <text class="i-bold">
                        所在区域
                      </text>
                      <text class="i-font u-p-b-20 u-p-t-20">
                        {{ d.data.psCode }}
                      </text>
                    </u-col>
                  </u-row>
                </view>
              </view>
              <view class="i-content u-border-bottom u-p-t-20">
                <view class="i-flex">
                  <text class="i-normal">
                    所属仓库
                  </text>
                  <text class="i-font">
                    {{ d.data.storeName }}
                  </text>
                </view>
                <view class="i-flex">
                  <text class="i-normal">
                    物品名称
                  </text>
                  <text class="i-font">
                    {{ d.data.goodsName }}
                  </text>
                </view>
                <view class="i-flex">
                  <text class="i-normal">
                    物品性质大类
                  </text>
                  <text class="i-font">
                    {{ d.data.propTypeName }}
                  </text>
                </view>
                <view class="i-flex">
                  <text class="i-normal">
                    物品性质小类
                  </text>
                  <text class="i-font">
                    {{ d.data.propSubTypeName }}
                  </text>
                </view>
                <view class="i-flex">
                  <text class="i-normal">
                    备注
                  </text>
                  <u-input :disabled="isDisabled" input-align="right" placeholder="" v-model=" d.data.remark"></u-input>
                </view>
              </view>
              <view class="i-coper u-p-t-20">
                <u-form :label-style="labelStyle" :model="inventForm">
                  <u-form-item :border-bottom="false">
                    <u-checkbox-group>
                      <u-checkbox
                        :name="item.filed"
                        :disabled="item.disabled"
                        v-for="(item, index) in d.data.checkList"
                        :key="index"
                        v-model="item.checked"
                      >
                        {{ item.name }}
                      </u-checkbox>
                    </u-checkbox-group>
                  </u-form-item>
                </u-form>
              </view>
            </view>
          </view>
        </me-table>
      </view>
      <!-- 底部按钮 -->
      <view class="submit-btns btn-other-cls" v-if="!isDisabled">
        <u-button plain class="del" type="primary" @click="submitInventory('save')">
          保存
        </u-button>
        <u-button class="mit" type="primary" @click="submitInventory('finish')">
          完成盘库
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
import meTable from '@/components/me-table.vue'
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
import storeService from '@/service/store/store.service.js';
import {C_STORE_CHECK_STATUS,} from "@/service/store/mapping/enum.js"
const sysCodeColors = {
  "03": {
    color: "#01A79A",
    borderColor: "#01A79A",
    backgroundColor: "#C0ECE2",
  },
  "04": {
    color: "#AC0000",
    borderColor: "#AC0000",
    backgroundColor: "#F2CCCC",
  },
  "01": {
    color: "#0079F2",
    borderColor: "#0079F2",
    backgroundColor: "#E0ECFF",
  },
  "02": {
    color: "#EC7C37",
    borderColor: "#EC7C37",
    backgroundColor: "#FBE2D3",
  },
};
export default {
  components: {
    meTable,
  },
  mixins: [MescrollMoreMixin,],
  data() {
    return {
      printShow:false,
      remark:'',
      isDisabled:false,
      labelPosition:'top',
      labelStyle: {
        color: '#333',
        fontSize: '26rpx',
      },
      totalCount:0,
      inventForm:{},
      searchKey:'',
      anaylisysList:[],
      userInfo:this.$storage.get(this.$rp.common.USER).user,
      preParams:{},
      isTop:0,
      checkList:[{
        name: '交接齐全',
        checked: false,
        disabled: false,
        filed:'handOver',
      },{
        name: '分案存放',
        checked: false,
        disabled: false,
        filed:'eachCaseSave',
      },{
        name: '罚没物品单独存放',
        checked: false,
        disabled: false,
        filed:'punishAlone',
      },{
        name: '损坏',
        checked: false,
        disabled: false,
        filed:'broken',
      },{
        name: '账物相符',
        checked: false,
        disabled: false,
        filed:'correct',
      },],
      storageDetailList:[],
    };
  },
  onLoad(){
    this.preParams =  this.getRouteParam();
    this.isDisabled = (this.preParams.status == C_STORE_CHECK_STATUS.COMPLETE || this.preParams.status == C_STORE_CHECK_STATUS.INVALID); // 相等为true
  },
  mounted() {
    this.$nextTick(() => {
      this.getTop();
    });
  },
  methods: {
    getTop(){
      this.$u.getRect('.invent-content').then(res => {
        this.isTop = res.height + res.height - 10;
      });
    },
    getListViewHeight() {
      let x = "0px";
      // #ifdef H5-DINGDING
      x = (this.$u.sys().windowHeight - 200 - this.$u.sys().statusBarHeight) + "px";
      // #endif
      // #ifndef H5-DINGDING || H5-WECHAT
      x = (this.$u.sys().windowHeight - 200 - 44 - this.$u.sys().statusBarHeight) + "px";
      // #endif
      return x;
    },
    getSpStyle(it){
      if(it.status == C_STORE_CHECK_STATUS.STAY){
        return sysCodeColors[it.status] || {};
      }else if(it.status == C_STORE_CHECK_STATUS.COMPLETE){
        return sysCodeColors[it.status] || {};
      }else if(it.status == C_STORE_CHECK_STATUS.INVALID){
        return sysCodeColors[it.status] || {};
      }else if(it.status == C_STORE_CHECK_STATUS.IN_LIBRARY){
        return sysCodeColors[it.status] || {};
      }
    },
    onloadData(page){
      let parmas = {
        page: page.num,
        limit: 15,
        paras: {
          checkId: this.preParams.id,
        },
      }
      return new Promise((resolve) => {
        storeService
          .getStoreInventoryDetailList(parmas)
          .then((res) => {
            if(res.success){
              if(res.data.length > 0){
                for(let k of res.data){
                  k['checkList'] = this.checkList.map((check) => {
                    return{
                      checked:Object.keys(k).indexOf(check['filed']) != -1 && !k[check['filed']] == 0,
                      disabled:this.preParams.status == C_STORE_CHECK_STATUS.COMPLETE || this.preParams.status == C_STORE_CHECK_STATUS.INVALID,
                      filed:check.filed,
                      name:check.name,
                    }
                  })
                }
                this.storageDetailList = res.data;
                console.log( this.storageDetailList,' this.storageDetailList')
              }
              resolve({
                count: res.count,
                data: this.storageDetailList,
              });
            }
          });
      });
    },

    submitInventory(flag){
      const goods = this.$refs['mescrollItem0'].listDatas.map((item) => {
        const {checkList,...rest} = item
        const obj = checkList.reduce((result,i) => {
          return {
            ...result,
            [i.filed]:i.checked === true ? 1 : 0,
            [i.filed + 'Name']:i.checked === true ? '是' : '否',
          }
        },{})
        return {
          ...rest,
          ...obj,
        }
      })
      let self = this;
      let parms = {
        goods,
        id:this.preParams.id,
        optType:flag,
        remark:this.preParams.remark,
      }
      this.$u.loading('数据提交中...')
      storeService.saveStoreCheck(parms).then(res => {
        this.$u.hideLoading();
        this.$u.toast(res.msg);
        self.backPrev({
          paramKey: "list",
          param : {},
        });
      }).catch(err => {
        this.$u.hideLoading();
        this.$u.toast(err);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./inven_common.scss";
/deep/ .uni-input-input{
    top: -20rpx;
}
.page{
  padding: 0;
}
.fs-title{
  font-weight: bold;
  font-size: 32rpx;
}
.left-info-tag{
    padding: 8px 2px;
    background-color: #ee8c4f;
    border-radius: 22px;
    margin: 3px 6px 13px 0px;
  }
  .form-style-title{
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    width: 100%;
    align-items: flex-start;
  }
  .content {
		background-color: #F3F4F5 ;
    min-height: 100%;
	}
  .list-item-root {
    margin: 10px;
    border-radius: 15px;
    overflow: hidden;
    background-color: #fff;
  }
.key-search-lay{
  background: #fff;
	position: fixed;
  /* #ifdef H5-DINGDING  */
    top: 0px;
    /* #endif */
    /* #ifndef H5-DINGDING  */
    top: 44px;
    /* #endif */
	z-index: 999;
	width: 100%;
  .key-search{
    padding: 0 10px;
  }
}

.i-box{
  padding: 15px;
}

.i-desc{
  .i-bold{
    // font-weight: bold;
    color: #333;
    font-size: 28rpx;
  }
  .i-title{
    .i-title-per{
      background: #3596ea;
    color: #fff;
    border-radius: 7px 0;
    padding: 5px;
    margin-right: 10px
    }
  }
  .i-row{
    margin-top: 10px;
    border-bottom: 1px solid #f3f3f4;
    .i-col{
      display: flex;
    flex-direction: column;
    text-align: center;
    }
  }
}

.i-flex{
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;
    .i-normal{
    color: #82848a;
    padding-bottom: 6px;
    }
    .i-font{
      color:#2e1f1f;
    }
  }
  .gap-space{
  height:88px;
}
.bottom-btn-info{
	position: fixed;
	bottom: 5px;
	right: 0;
	left: 0;
	z-index: 999;
}
  /deep/.u-checkbox__icon-wrap--disabled{
    background-color: #bbc1cb;
    border-color: #bbc1cb;
  }
.pb-70{
  padding-bottom: 140rpx;
}
</style>
